<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    文档流
        文档中可显示的元素在排列的时候的开始位置以及它们所占的区域；
        因为页面中的元素分为不同的种类，所以它们会按照各自的特点去显示，
        在页面中所占的区域是不一样的，一般情况下会按照从上到下，从左到右的顺序输出内容；
    <span style="background: red;">kaivon</span>
    <span style="background: red;">kaivon2</span>

<span style="background: red;">kaivon</span>
<div style="width: 100px;height: 100px; background: red;">kaivon2</div>

<span style="background: red;">kaivon</span>
<div style="width: 100px;height: 100px; background: red; display: inline-block;">kaivon2</div>

-->

<div style="width: 100px;height: 100px; background: red; ">kaivon1</div>
<div style="width: 100px;height: 100px; background: green;">kaivon2</div>
</body>
</html>